import DefaultImage from '@/asset/default-image.png';
import { useToast } from '@/hooks/use-toast';
import { result } from '@/lib/utils';
import { adminUpdateShopStatus } from '@/service/actions/shop';
import { useState, useTransition } from 'react';
import ConfirmButton from '../common/confirm-button';
import ImagePreview from '../common/image-preview';
import QueryImage from '../common/query-image';
import { Button } from '../ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '../ui/dialog';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';

export default function ReviewButton({
  shopId,
  button,
  licenseKey,
  hygieneCertKey,
}: {
  shopId: number;
  button: React.ReactNode;
  licenseKey: string | null;
  hygieneCertKey: string | null;
}) {
  const { toast } = useToast();
  const [open, setOpen] = useState(false);
  const [rejectReason, setRejectReason] = useState('');
  const [outOpen, setOutOpen] = useState(false);
  const [isPending, startTransition] = useTransition();

  return (
    <Dialog open={outOpen} onOpenChange={setOutOpen}>
      <DialogTrigger asChild>{button}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>审核资质</DialogTitle>
          <DialogDescription className="hidden" />
        </DialogHeader>
        <div className="flex justify-center gap-2">
          <ImagePreview
            imageKey={licenseKey}
            button={
              <QueryImage
                imageKey={licenseKey}
                defaultImage={DefaultImage}
                wrapperClassName="h-44 w-full"
                imgClassName="h-full w-full object-cover cursor-pointer"
              />
            }
          />

          <ImagePreview
            imageKey={hygieneCertKey}
            button={
              <QueryImage
                imageKey={hygieneCertKey}
                defaultImage={DefaultImage}
                wrapperClassName="h-44 w-full"
                imgClassName="h-full w-full object-cover cursor-pointer"
              />
            }
          />
        </div>
        <div className="flex justify-between">
          <Dialog open={open}>
            <DialogTrigger asChild>
              <Button variant="outline" onClick={() => setOpen(true)}>
                驳回申请
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>驳回申请</DialogTitle>
                <DialogDescription className="hidden" />
              </DialogHeader>
              <div>
                <Label>驳回原因</Label>
                <Textarea
                  rows={3}
                  value={rejectReason}
                  onChange={(e) => setRejectReason(e.target.value)}
                  className="resize-none"
                />
              </div>
              <div className="flex justify-end gap-2">
                <Button
                  variant="outline"
                  onClick={() => {
                    setOpen(false);
                    setRejectReason('');
                  }}
                >
                  取消
                </Button>
                <Button
                  disabled={isPending}
                  onClick={() => {
                    if (!rejectReason)
                      return toast({
                        title: '请输入驳回原因',
                        variant: 'destructive',
                      });
                    startTransition(async () => {
                      const { error } = await adminUpdateShopStatus({
                        status: 'rejected',
                        shopId,
                        rejectReason,
                      });
                      error &&
                        toast({
                          title: error.message,
                          variant: 'destructive',
                        });
                      if (!error) {
                        toast({ title: '驳回成功' });
                        setOpen(false);
                        setRejectReason('');
                        setOutOpen(false);
                      }
                    });
                  }}
                >
                  {isPending && (
                    <span className="i-ri-loader-4-line animate-spin" />
                  )}
                  确定
                </Button>
              </div>
            </DialogContent>
          </Dialog>
          <ConfirmButton
            title="通过审核"
            description="你确定要通过审核吗?"
            button={<Button>通过审核</Button>}
            onClick={async () => {
              const { error } = await adminUpdateShopStatus({
                status: 'normal',
                shopId,
              });
              error
                ? toast({ title: error.message, variant: 'destructive' })
                : toast({ title: '审核通过' });
              return error ? result(error, error.message) : result();
            }}
          />
        </div>
      </DialogContent>
    </Dialog>
  );
}
